//out:../css/message.css
@import url(./module.less);
body {
    background-color: #f4f4f4;
    padding-top: (69/@rem);
}

// 头部
.header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 69./@rem;
    background-color:white;
    overflow: hidden;
          h3 {
            font-weight: 600;
            font-size: @s18;
            color: @textColor;
            text-align: center;
            margin-top: 9./@rem;
           }
           .left {
            font-size: 14./@rem;
            color: @textColor;
            position: absolute;
            top: 39./@rem;
            left: 79./@rem;
            
           }
           .line {
            width: 23./@rem;
            height: @s4;
            background-color: #EF4F3F;
            position: absolute;
            left: 82./@rem;
            top: 65./@rem;
            border-radius: @s2;
            transition: all 0.3s;
           }
           
           .right {
            font-size: @s14;
            color: @text2Color; 
            position: absolute;
            left: 245.5./@rem; 
            top: 39./@rem;        
       }      
    }

//全部已读
.read {
    width: (82/@rem);
    height: (45/@rem);
    display: flex;
    align-items: center;
    margin-left: (17.27/@rem);
    a {
        // .iconfont {
        // }
        span {
            font-size: @s14;
            color: @text2Color;
        }
    }
}

//text
.wrapper1 {
    .text1 {
        ul {
            li {
                display: flex;
                align-items: center;
                justify-content: left;
                text-align: center;
                background-color: white;
                height: 59./@rem;
                border-bottom: @s1 solid @splitAreaBorderColor;
                &:last-child {
                    border-bottom: 0;
                }
                .point {
                    width: @s8;
                    height: @s8;
                    background-color: #EF4F3F;
                    border-radius: 50%;             
                    opacity:1;
                    margin-left: @s8;
                    margin-right: @s6;
                }
                .info {
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    align-items: center;
                    margin-right: @s14;
                    p {
                        font-weight: 400;
                        font-size: @s14;
                        color: @textColor;
                    }
                    span {
                        font-size: @s12;
                        color: @text2Color;
                    }
                    a {
                        z-index: 5;
                        width: 0;
                        height: @s18;
                        background-image: url(../image/垃圾桶.png);
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: contain;
                        transition: all 0.3s;
                    }
                }
            }
        }
    }
}

.wrapper2 {
    opacity: 0;
    .text2 {
        width: 348./@rem;
        height: 151./@rem;
        background-color:white;
        border-radius: @s10;
        margin-left: 14.5./@rem;
        z-index: 10;
        ul {
            li {
                height: 50./@rem;
                line-height: 50./@rem;
                margin-left: 16./@rem;            
            }
            .up {
                font-size: 14./@rem;
                color: @textColor;
                border-bottom: 1px solid #F4F4F4;
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                    height: @s7;
                    width: @s7;
                    background-color: red;
                    border-radius: 50%;
                    margin-right: @s15;
                }
            }
            .middle {
                font-size: 13./@rem;
                color: @text2Color;
                span {
                    margin-left: 13./@rem;
                }
            }
            .down {
                font-size: @s12;
                color: @text2Color;
                display: flex;
                align-items: center;
                justify-content: space-between;
                 .view {
                    text-align: center;
                    line-height: 24./@rem;
                    margin-right:16.5./@rem ;
                    width: 76./@rem;
                    height: 24./@rem;
                    font-size: 12./@rem;
                    color: #EF4F3F;
                    border: 1./@rem solid #EF4F3F;
                    border-radius: 12./@rem;       
                }
            }       
        }
        
    }
    
    .text3 {
        width: 348./@rem;
        height: 151./@rem;
        background-color:white;
        border-radius: @s10;
        margin-left: 14.5./@rem;
        margin-top: 15./@rem;
        z-index: 10;
        position: absolute;
        ul {
            li {
                height: 50./@rem;
                line-height: 50./@rem;
                margin-left: 16./@rem;           
            }
            .up {
                font-size: 14./@rem;
                color: @textColor;
                border-bottom: 1px solid #F4F4F4;
                display: flex;
                align-items: center;
                justify-content: space-between;
            
                span {
                    height: @s7;
                    width: @s7;
                    background-color: red;
                    border-radius: 50%;
                    margin-right: @s15;
                }
            }
            .middle {
                font-size: 13./@rem;
                color: @text2Color;
                span {
                    margin-left: 13./@rem;
                }
            }
            .down {
                font-size: @s12;
                color: @text2Color;
                display: flex;
                align-items: center;
                justify-content: space-between;
                 .view {
                    text-align: center;
                    line-height: 24./@rem;
                    margin-right:16.5./@rem ;
                    width: 76./@rem;
                    height: 24./@rem;
                    font-size: 12./@rem;
                    color: #EF4F3F;
                    border: @s1 solid #EF4F3F;
                    border-radius: 12./@rem;       
                }
            }       
        }
    }
}
.bottomStyle{
    .information {
        a {
            position: relative;
            .rPoint {
                position: absolute;
                top: -@s10;
                right: -@s3;
                height: @s12;
                width: @s12;
                background-color: #EF4F3F;
                border-radius: 50%;
                border: @s3 solid #fff;
                transform: scale(1);
                z-index: 1;
                opacity: 1;
            }
        }
    }
}

.emptyContent {
    transition: all 0.3s;
    opacity: 0;
}